<template>
  <div class="business-home-container">
    <el-row :gutter="20" class="business-row">
      <el-col :span="14" :xs="24" class="business-col">
        <!-- 未授权状态 -->
        <ContentWrap v-if="isShowData == false" class="auth-wrapper">
          <div class="auth-empty">
            <div class="empty-icon">
              <Icon icon="ep:lock" class="lock-icon" />
            </div>
            <div class="empty-content">
              <h3 class="empty-title">企业未授权</h3>
              <p class="empty-description">请先完成企业授权以查看相关信息</p>
            </div>
            <div class="empty-actions">
              <el-button @click="handleAwait" type="primary" class="auth-btn">
                <Icon icon="ep:key" class="btn-icon" />
                获取企业授权
              </el-button>
            </div>
          </div>
        </ContentWrap>

        <!-- 企业信息 -->
        <ContentWrap v-if="isShowData" class="info-wrapper">
          <!-- 页面头部 -->
          <div class="page-header">
            <div class="header-icon">
              <Icon icon="ep:office-building" />
            </div>
            <div class="header-content">
              <h3 class="page-title">企业信息管理</h3>
              <p class="page-subtitle">查看和管理企业微信相关配置</p>
            </div>
          </div>

          <!-- 企业基本信息 -->
          <div class="info-section">
            <div class="section-header">
              <Icon icon="ep:info-filled" class="section-icon" />
              <h4 class="section-title">企业基本信息</h4>
            </div>

            <div class="info-grid">
              <div class="info-item logo-item">
                <div class="item-label">
                  <Icon icon="fa-solid:file-image" class="label-icon" />
                  <span>企业logo</span>
                </div>
                <div class="item-value logo-container">
                  <img :src="formData?.corpLogoUrl" class="corp-logo" alt="企业logo" />
                </div>
              </div>

              <div class="info-item">
                <div class="item-label">
                  <Icon icon="ep:postcard" class="label-icon" />
                  <span>企业ID</span>
                </div>
                <div class="item-value">{{ formData?.corpId || '-' }}</div>
              </div>

              <div class="info-item">
                <div class="item-label">
                  <Icon icon="ep:suitcase" class="label-icon" />
                  <span>企业名称</span>
                </div>
                <div class="item-value">{{ formData?.corpName || '-' }}</div>
              </div>

              <div class="info-item">
                <div class="item-label">
                  <Icon icon="ep:suitcase" class="label-icon" />
                  <span>企业全称</span>
                </div>
                <div class="item-value">{{ formData?.corpFullName || '-' }}</div>
              </div>

              <div class="info-item">
                <div class="item-label">
                  <Icon icon="fa-solid:file-upload" class="label-icon" />
                  <span>用户上限</span>
                </div>
                <div class="item-value">{{ formData?.corpUserMax || '-' }}</div>
              </div>

              <div class="info-item">
                <div class="item-label">
                  <Icon icon="fa-solid:qrcode" class="label-icon" />
                  <span>企业类型</span>
                </div>
                <div class="item-value">{{ TypeMap[formData?.corpSubjectType] || '-' }}</div>
              </div>

              <div class="info-item">
                <div class="item-label">
                  <Icon icon="ep:calendar" class="label-icon" />
                  <span>创建日期</span>
                </div>
                <div class="item-value">{{ formatDate(formData?.createTime) || '-' }}</div>
              </div>
            </div>
          </div>

          <!-- 通讯录授权 -->
          <div class="auth-section">
            <div class="section-header">
              <Icon icon="ep:user" class="section-icon" />
              <h4 class="section-title">通讯录授权</h4>
              <el-tag
                v-if="formData"
                :type="msgType[formData?.contactAuthStatus].type"
                class="auth-tag"
              >
                {{ msgType[formData?.contactAuthStatus].msg }}
              </el-tag>
            </div>

            <div class="auth-content">
              <div class="auth-description">
                <Icon icon="ep:info-filled" class="desc-icon" />
                <span>完成通讯录授权的企业可以在CRM系统内管理通讯录员工和客户</span>
              </div>
              <el-button
                v-if="formData?.contactAuthStatus == 0"
                type="primary"
                class="auth-action-btn"
                @click="getContactAuthUrl"
              >
                <Icon icon="ep:key" class="btn-icon" />
                获取授权
              </el-button>
            </div>
          </div>

          <!-- 获客助手授权 -->
          <div class="auth-section">
            <div class="section-header">
              <Icon icon="ep:promotion" class="section-icon" />
              <h4 class="section-title">获客助手授权</h4>
              <div class="auth-status">
                <el-tag
                  v-if="formData"
                  :type="msgType[formData?.acqAuthStatus].type"
                  class="auth-tag"
                >
                  {{ msgType[formData?.acqAuthStatus].msg }}
                </el-tag>
                <div class="usage-status">
                  <span class="status-label">使用状态：</span>
                  <span
                    class="status-value"
                    :class="{
                      'status-normal': formData?.acqStatus == 'normal',
                      'status-warning': formData?.acqStatus == 'balance_low',
                      'status-danger': formData?.acqStatus == 'balance_exhausted'
                    }"
                  >
                    {{
                      formData?.acqStatus == 'normal'
                        ? '正常'
                        : formData?.acqStatus == 'balance_low'
                          ? '余额低于20'
                          : formData?.acqStatus == 'balance_exhausted'
                            ? '已用完'
                            : '-'
                    }}
                  </span>
                </div>
              </div>
            </div>

            <div class="auth-content">
              <div class="auth-description">
                <Icon icon="ep:info-filled" class="desc-icon" />
                <span>完成获客助手授权的企业可以在CRM系统内管理获客链接和获客统计</span>
              </div>
              <el-button
                v-if="formData?.acqAuthStatus == 0"
                type="primary"
                class="auth-action-btn"
                @click="getAcqAuthUrl"
              >
                <Icon icon="ep:key" class="btn-icon" />
                获取授权
              </el-button>
            </div>
          </div>

          <!-- 会话存档授权 -->
          <div class="auth-section">
            <div class="section-header">
              <Icon icon="ep:chat-dot-round" class="section-icon" />
              <h4 class="section-title">数据与智能专区-会话存档</h4>
              <el-tag
                v-if="formData"
                :type="msgType[formData?.dataAuthStatus].type"
                class="auth-tag"
              >
                {{ msgType[formData?.dataAuthStatus].msg }}
              </el-tag>
            </div>

            <div class="auth-content">
              <div class="auth-description">
                <Icon icon="ep:warning" class="desc-icon warning" />
                <span>开启前，请先在企微应用管理-权限管理，打开数据与智能专区权限</span>
              </div>
              <el-button
                v-if="formData?.dataAuthStatus == 0"
                type="primary"
                class="auth-action-btn"
                @click="authorizationDiloag"
              >
                <Icon icon="ep:unlock" class="btn-icon" />
                授权开启
              </el-button>
            </div>

            <!-- 存档配置 -->
            <div v-if="formData?.dataAuthStatus == 1" class="archive-config">
              <div class="config-item">
                <div class="config-label">
                  <Icon icon="ep:timer" class="label-icon" />
                  <span>会话存档记录保存</span>
                </div>
                <div class="config-control">
                  <el-input-number
                    v-model="formData.msgSaveDay"
                    :min="1"
                    :max="90"
                    class="day-input"
                  />
                  <span class="unit">天</span>
                  <el-button type="primary" class="save-btn" @click="saveDay">
                    <Icon icon="ep:check" class="btn-icon" />
                    保存配置
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 聊天工具栏 -->
          <div class="tool-section">
            <div class="section-header">
              <Icon icon="ep:link" class="section-icon" />
              <h4 class="section-title">获取聊天工具栏页面地址</h4>
            </div>

            <div class="tool-content">
              <div class="url-display">
                <div class="url-text">{{ weComUrl }}</div>
                <el-button
                  type="success"
                  size="small"
                  plain
                  class="copy-btn"
                  @click="handleCopyUrl"
                >
                  <Icon icon="ep:document-copy" class="btn-icon" />
                  复制
                </el-button>
              </div>
            </div>
          </div>
        </ContentWrap>
      </el-col>
    </el-row>

    <!-- 授权说明弹窗 -->
    <Dialog
      title="开启授权前请先阅读以下内容"
      v-model="dialogVisible"
      width="1200"
      class="auth-dialog"
    >
      <div class="dialog-content">
        <div class="instruction-content">
          <p class="instruction-text">
            网页登录企业微信后台管理，打开应用管理，找到"数创万维"应用，点击进入应用详情页面。点击"授权信息"
          </p>
          <div class="instruction-image">
            <img
              src="http://scrm-admin.jzsaas.com/admin-api/infra/file/4/get/2ff1cd9d7e58203b275354981e80651460df49648e3457b22864e213521bd74c.png"
              alt="授权步骤1"
              class="step-image"
            />
          </div>
          <p class="instruction-text">
            在授权信息页面，找到"数据与智能专区"权限，首次打开时，是未授权状态，点击授权，进入授权详情页面。
          </p>
          <div class="instruction-image">
            <img
              src="http://scrm-admin.jzsaas.com/admin-api/infra/file/4/get/8f9b61ebb28081f1abfe72282c721ae1e89311b3cb7539fd719e7953e5e36a74.png"
              alt="授权步骤2"
              class="step-image"
            />
          </div>
          <p class="instruction-text">
            按需勾选会话类型，以及需要存档的员工或部门。
            注意，未勾选的会话类型和员工是无法完成会话存档和会话分析的。 点击确认即可完成授权
          </p>
          <div class="instruction-image">
            <img
              src="http://scrm-admin.jzsaas.com/admin-api/infra/file/4/get/99ae3b34011b1016391e0b5d68a9a4a81a0d18ecef80358be9d2f4da6dd90565.png"
              alt="授权步骤3"
              class="step-image"
            />
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="submitAuthon" type="primary" :disabled="formLoading" class="confirm-btn">
          <Icon icon="ep:check" class="btn-icon" />
          我已知悉，继续开启授权
        </el-button>
      </template>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { formatDate } from '@/utils/formatTime'
import * as WecomBusinessHomeApi from '@/api/wecom/businessHome/index'
import * as WeComApiConfigApi from '@/api/wecom/apiconfig'

defineOptions({ name: 'WecomBusinessHome' })

const msgType = {
  '0': {
    type: 'info',
    msg: '未授权'
  },
  '1': {
    type: 'success',
    msg: '已授权'
  }
}

const loading = ref(true) // 列表的加载中
const isShowData = ref(false) // 是否显示数据
const formData = ref(null) // 数据对象

const TypeMap = {
  1: '企业',
  2: '政府以及事业单位',
  3: '其他组织',
  4: '团队号'
}

const dialogVisible = ref(false) // 弹窗的是否展示

const submitAuthon = async () => {
  let data = await WecomBusinessHomeApi.bindDataAuth()
  if (data) {
    ElMessage.success('操作成功!')
    dialogVisible.value = false
    getWeComApiConfig()
  }
}

/** 查询企业数据 */
const getWeComApiConfig = async () => {
  loading.value = true
  try {
    loading.value = false
    formData.value = await WeComApiConfigApi.getWeComApiConfig()
    if (formData.value == null) {
      isShowData.value = false
    } else {
      isShowData.value = true
    }
  } finally {
    loading.value = false
  }
}

// 开启授权
const authorizationDiloag = () => {
  dialogVisible.value = true
}

/** 查询授权码 */
const handleAwait = async () => {
  try {
    const data = await WecomBusinessHomeApi.getCorpAuthUrl()
    if (data) {
      window.open(data)
    }
    ElMessageBox.confirm('是否已经完成授权', '系统提示', {
      confirmButtonText: '已完成',
      cancelButtonText: '取消',
      type: 'warning',
      closeOnClickModal: false
    })
      .then(() => {
        setTimeout(() => {
          getWeComApiConfig()
        }, 1e3)
      })
      .catch(() => {
        isShowData.value = false
      })
  } finally {
    loading.value = false
  }
}

// 查看是否通讯录授权
const getContactAuthUrl = async () => {
  const data = await WecomBusinessHomeApi.getContactAuthUrl()
  if (data) {
    window.open(data)
    ElMessageBox.confirm('是否已经完成授权', '系统提示', {
      confirmButtonText: '已完成',
      cancelButtonText: '取消',
      type: 'warning',
      closeOnClickModal: false
    }).then(() => {
      setTimeout(() => {
        getWeComApiConfig()
      }, 1e3)
    })
  }
}

// 查看是否获客助手授权
const getAcqAuthUrl = async () => {
  const data = await WecomBusinessHomeApi.getAcqAuthUrl()
  if (data) {
    window.open(data)
    ElMessageBox.confirm('是否已经完成授权', '系统提示', {
      confirmButtonText: '已完成',
      cancelButtonText: '取消',
      type: 'warning',
      closeOnClickModal: false
    }).then(() => {
      setTimeout(() => {
        getWeComApiConfig()
      }, 1e3)
    })
  }
}

const handleCopyUrl = () => {
  navigator.clipboard
    .writeText(weComUrl.value)
    .then(() => {
      ElMessage.success('复制成功')
    })
    .catch((err) => {
      ElMessage.error('无法复制文本: ', err)
    })
}

const weComUrl = ref('')

const getTool = async () => {
  weComUrl.value = await WeComApiConfigApi.getChatToolPage()
}

const saveDay = async () => {
  const data = await WeComApiConfigApi.editMsgSaveDay(formData.value.msgSaveDay)
  if (data) {
    ElMessage.success('保存配置成功')
  }
}

/** 初始化 */
onMounted(async () => {
  await getWeComApiConfig()
  getTool()
})
</script>

<style scoped lang="scss">
// 主题色变量
$primary-color: #0052cc;
$primary-light: rgba(0, 82, 204, 0.1);
$primary-border: rgba(0, 82, 204, 0.3);
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$text-placeholder: #c0c4cc;
$border-color: #dcdfe6;
$border-light: #e4e7ed;
$bg-color: #f5f7fa;
$shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$shadow-base:
  0 2px 4px rgba(0, 0, 0, 0.12),
  0 0 6px rgba(0, 0, 0, 0.04);
$border-radius: 12px;
$border-radius-small: 8px;

.business-home-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;

  @media (max-width: 768px) {
    padding: 8px;
  }
}

.business-row {
  width: calc(100% - 40px);
  height: calc(100% - 40px);

  @media (max-width: 768px) {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    top: 8px;
    left: 8px;
    margin: 0 !important;
  }
}

.business-col {
  margin: 0 auto;

  @media (max-width: 768px) {
    padding: 0 !important;
  }
}

/* 未授权状态样式 */
.auth-wrapper {
  height: 100%;
  border-radius: $border-radius;
  box-shadow: $shadow-light;
  border: 1px solid $border-light;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-empty {
  text-align: center;
  padding: 40px;

  @media (max-width: 768px) {
    padding: 24px;
  }
}

.empty-icon {
  margin-bottom: 24px;

  .lock-icon {
    font-size: 64px;
    color: $text-placeholder;

    @media (max-width: 768px) {
      font-size: 48px;
    }
  }
}

.empty-content {
  margin-bottom: 32px;

  @media (max-width: 768px) {
    margin-bottom: 24px;
  }
}

.empty-title {
  font-size: 20px;
  font-weight: 600;
  color: $text-primary;
  margin: 0 0 8px 0;

  @media (max-width: 768px) {
    font-size: 18px;
  }
}

.empty-description {
  font-size: 14px;
  color: $text-secondary;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 13px;
  }
}

.auth-btn {
  background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
  border: none;
  border-radius: $border-radius-small;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
  }

  @media (max-width: 768px) {
    width: 100%;
    padding: 10px 24px;
    font-size: 14px;
  }

  .btn-icon {
    margin-right: 8px;
  }
}

/* 信息容器样式 */
.info-wrapper {
  border-radius: $border-radius;
  box-shadow: $shadow-light;
  border: 1px solid $border-light;
  overflow: hidden;
  background: white;

  :deep(.el-card__body) {
    padding: 0;
  }
}

/* 页面头部 */
.page-header {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
  color: white;
  border-bottom: 1px solid $border-light;

  @media (max-width: 768px) {
    padding: 16px;
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: $border-radius-small;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

.header-content {
  flex: 1;
  margin-left: 16px;

  @media (max-width: 768px) {
    margin-left: 0;
  }
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px 0;

  @media (max-width: 768px) {
    font-size: 18px;
  }
}

.page-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

/* 信息区块样式 */
.info-section,
.auth-section,
.tool-section {
  padding: 24px;
  border-bottom: 1px solid $border-light;
  background: white;

  &:last-child {
    border-bottom: none;
  }

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    margin-bottom: 16px;
    gap: 8px;
  }
}

.section-icon {
  color: $primary-color;
  font-size: 18px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    font-size: 16px;
  }
}

.section-title {
  font-size: 17px;
  font-weight: 600;
  color: $text-primary;
  margin: 0;
  flex: 1;

  @media (max-width: 768px) {
    font-size: 16px;
  }
}

/* 信息网格 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.info-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #fafbff;
  border-radius: $border-radius-small;
  border: 1px solid $border-light;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: $shadow-base;
    border-color: $primary-border;
  }

  &.logo-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  @media (max-width: 768px) {
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.item-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  font-weight: 500;
  color: $text-secondary;
  font-size: 13px;

  @media (max-width: 768px) {
    min-width: auto;
    width: 100%;
  }
}

.label-icon {
  color: $primary-color;
  font-size: 14px;
  flex-shrink: 0;
}

.item-value {
  flex: 1;
  color: $text-primary;
  font-size: 14px;
  font-weight: 500;
  word-break: break-all;

  @media (max-width: 768px) {
    width: 100%;
  }
}

/* Logo容器 */
.logo-container {
  width: 100%;
}

.corp-logo {
  width: 200px;
  height: auto;
  border-radius: $border-radius-small;
  border: 1px solid $border-light;
  box-shadow: $shadow-base;

  @media (max-width: 768px) {
    width: 150px;
  }
}

/* 授权相关样式 */
.auth-tag {
  border-radius: 6px;
  font-weight: 500;
  font-size: 12px;
}

.auth-status {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    gap: 8px;
    width: 100%;
    justify-content: space-between;
  }
}

.usage-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.status-label {
  color: $text-secondary;
}

.status-value {
  font-weight: 500;

  &.status-normal {
    color: $success-color;
  }

  &.status-warning {
    color: $warning-color;
  }

  &.status-danger {
    color: $danger-color;
  }
}

.auth-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.auth-description {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 14px;
  color: $text-secondary;
  line-height: 1.5;

  @media (max-width: 768px) {
    font-size: 13px;
  }
}

.desc-icon {
  color: $primary-color;
  font-size: 16px;
  flex-shrink: 0;

  &.warning {
    color: $warning-color;
  }
}

.auth-action-btn {
  background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
  border: none;
  border-radius: $border-radius-small;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  flex-shrink: 0;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
  }

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 存档配置 */
.archive-config {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9ff;
  border-radius: $border-radius-small;
  border: 1px solid $primary-border;

  @media (max-width: 768px) {
    margin-top: 12px;
    padding: 12px;
  }
}

.config-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.config-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: $text-primary;
  font-weight: 500;
}

.config-control {
  display: flex;
  align-items: center;
  gap: 8px;

  @media (max-width: 768px) {
    width: 100%;
    justify-content: space-between;
  }
}

.day-input {
  width: 120px;

  @media (max-width: 768px) {
    width: 80px;
  }
}

.unit {
  font-size: 14px;
  color: $text-secondary;
}

.save-btn {
  background: linear-gradient(135deg, $success-color 0%, lighten($success-color, 10%) 100%);
  border: none;
  border-radius: $border-radius-small;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;

  .btn-icon {
    margin-right: 4px;
  }
}

/* 工具栏样式 */
.tool-content {
  background: #f8f9ff;
  border-radius: $border-radius-small;
  padding: 16px;
  border: 1px solid $primary-border;

  @media (max-width: 768px) {
    padding: 12px;
  }
}

.url-display {
  display: flex;
  align-items: center;
  gap: 12px;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

.url-text {
  flex: 1;
  padding: 8px 12px;
  background: white;
  border: 1px solid $border-color;
  border-radius: $border-radius-small;
  font-size: 13px;
  color: $text-primary;
  word-break: break-all;
  line-height: 1.4;
}

.copy-btn {
  border-radius: $border-radius-small;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-1px);
  }

  .btn-icon {
    margin-right: 4px;
  }
}

/* 弹窗样式 */
.auth-dialog {
  :deep(.el-dialog) {
    border-radius: $border-radius;
    overflow: hidden;
  }

  :deep(.el-dialog__header) {
    background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
    color: white;
    padding: 20px 24px;
  }

  :deep(.el-dialog__title) {
    color: white;
    font-weight: 600;
  }

  :deep(.el-dialog__headerbtn) {
    .el-dialog__close {
      color: white;
      font-size: 18px;

      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}

.dialog-content {
  padding: 0;
}

.instruction-content {
  height: 500px;
  padding: 16px;
  overflow-y: auto;
  border: 1px solid $border-light;
  border-radius: $border-radius-small;
  background: #fafbff;

  @media (max-width: 768px) {
    height: 400px;
    padding: 12px;
  }
}

.instruction-text {
  font-size: 14px;
  line-height: 1.6;
  color: $text-primary;
  margin: 0 0 16px 0;

  @media (max-width: 768px) {
    font-size: 13px;
  }
}

.instruction-image {
  margin: 16px 0;
  text-align: center;
}

.step-image {
  max-width: 100%;
  height: auto;
  border-radius: $border-radius-small;
  box-shadow: $shadow-base;
  border: 1px solid $border-light;
}

.confirm-btn {
  background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
  border: none;
  border-radius: $border-radius-small;
  padding: 10px 24px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 响应式优化 */
@media (max-width: 480px) {
  .business-home-container {
    padding: 4px;
  }

  .business-row {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    top: 4px;
    left: 4px;
  }

  .info-section,
  .auth-section,
  .tool-section {
    padding: 12px;
  }

  .page-header {
    padding: 12px;
  }

  .info-item {
    padding: 8px;
  }

  .corp-logo {
    width: 120px;
  }

  .instruction-content {
    height: 300px;
    padding: 8px;
  }
}

/* 滚动条美化 */
.instruction-content {
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 82, 204, 0.3);
    border-radius: 3px;

    &:hover {
      background: rgba(0, 82, 204, 0.5);
    }
  }
}

/* 加载状态优化 */
:deep(.el-loading-mask) {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);

  .el-loading-spinner {
    .path {
      stroke: $primary-color;
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .business-home-container {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }

  .auth-wrapper,
  .info-wrapper {
    background: #374151;
    border-color: #4b5563;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .info-section,
  .auth-section,
  .tool-section {
    background: #374151;
    border-color: #4b5563;
  }

  .page-title,
  .empty-title {
    color: #f9fafb;
  }

  .info-item {
    background: #4b5563;
    border-color: #6b7280;
  }

  .item-value,
  .instruction-text {
    color: #f9fafb;
  }

  .tool-content,
  .archive-config {
    background: #4b5563;
    border-color: #6b7280;
  }

  .url-text {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
  }

  .instruction-content {
    background: #4b5563;
    border-color: #6b7280;
  }
}
</style>
